<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <table border="1">
      <thead>
        <tr>
          <th>
            全选
            <!-- click拿到的是变化之前的状态，change是最新的状态。获得状态后，分配给每一个商品 -->
            <input type="checkbox" v-model="allCheck" @change="checkAll">
          </th>
          <th>图片</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(goods, index) in goodslist" :key="index">
          <td>
            <input type="checkbox" v-model="goods.check" @change="checkItem(index)">
          </td>
          <td>
            <img :src="goods.goodsimg" :alt="goods.goodsname" width="100">
          </td>
          <td>{{goods.goodsname}}</td>
          <td>{{goods.price}}</td>
          <td>
            <button @click="deNum(index)">-</button>
            {{goods.num}}
            <button @click="addNum(index)">+</button>
          </td>
          <td>{{goods.num * goods.price}}</td>
          <td>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
        <tr>
          <td colspan="4">总计</td>
          <td>{{totalNum}}件</td>
          <td>{{totalPrice}}元</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        // 是否全选
        allCheck: false,
        goodslist: [
          {
            id: 1,
            goodsname: 'vivo IQ777',
            goodsimg: 'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp',
            price: 2999,
            num: 1
          },
          {
            id: 2,
            goodsname: '小米10',
            goodsimg: 'https://img10.360buyimg.com/seckillcms/s280x280_jfs/t1/97161/40/12127/66234/5e440190E7cd0f54e/33627b2c39a67241.jpg.webp',
            price: 998,
            num: 1
          },
          {
            id: 3,
            goodsname: '传世的珐琅锅',
            goodsimg: 'https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/168750/15/16697/127861/606c22c0Eca19515e/5adfe8e452fffbff.png.webp',
            price: 1768,
            num: 1
          },
          {
            id: 4,
            goodsname: '蔻驰的丑包',
            goodsimg: 'https://img12.360buyimg.com/ceco/s300x300_jfs/t1/119430/19/3585/133796/5eb12fe7E1a4ee264/392d83858bb8cd52.jpg!q70.jpg.webp',
            price: 17865,
            num: 1
          }
        ]
      },
      // 在钩子函数中，遍历数组给每一件商品添加是否选中的变量，通过变量管理是否选中
      created() {
        this.goodslist.forEach(item => {
          // 默认不选中
          // item.check = false;
          this.$set(item, 'check', false)
        })
        console.log(this.goodslist);
      },
      computed: {
        // 总数量
        totalNum() {
          let num = 0;
          this.goodslist.forEach(item => {
            // 选中后才计算
            if(item.check) {
              num += item.num
            }
          });
          return num
        },
        // 总价格
        totalPrice() {
          let num = 0;
          this.goodslist.forEach(item => {
            // 选中后才计算
            if(item.check) {
              num += item.num * item.price
            }
          });
          return num.toFixed(2)
        }
      },
      methods: {
        // 管理全选
        checkAll() {
          console.log(this.allCheck);
          // 将全选的结果赋值给每一件商品
          this.goodslist.forEach(item => {
            item.check = this.allCheck;
          })
        },
        // 每一项的选中
        checkItem(index) {
          // 每一项都符合条件，才返回true
          this.allCheck = this.goodslist.every(item => {
            return item.check
          })
        },
        // 数量减少
        deNum(index) {
          // 至少买一件
          this.goodslist[index].num > 1 ? this.goodslist[index].num -- : ''
        },
        // 数量增加，假设商品没有上限
        addNum(index) {
          this.goodslist[index].num ++
        },
        del(index) {
          this.goodslist.splice(index, 1);
        }
      },
    })
  </script>
</body>

</html>